<template>
	<view class="setPage">
		<!-- 设置的列表 -->
		<view class="setList" v-for="(item,index) in setList" :key="index" hover-start-time=15 hover-stay-time=200 @tap="open(item)"
		 hover-class="bgcolor">
			<text>{{item}}</text>
			<text class="iconfont icon-jinru"></text>
		</view>

		<!-- 退出登陆 -->
		<view class="outLogin" hover-start-time=15 hover-stay-time=200 hover-class="bgColoroutLogin">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setList: ["账号安全", "绑定邮箱", "资料编辑", "清除缓存", "意见反馈", "关于社区"]
			};
		},
		onLoad() {},
		methods: {
			open(item) {
				let url = void 0;
				// 对要跳转的页面进行判断了
				switch (item) {
					case "账号安全":
						url = `../password/password`;
						break;
					case "绑定邮箱":
						url = `../email/email`;
						break;
					case "资料编辑":
						url = `../info/info`;
						break;
					case "清除缓存":
						this.clear();
						break;
					case "意见反馈":
						url = `../helpfeedback/helpfeedback`;
						break;
					default:
						url = `../about/about`;
						break;
				};
				// 页面跳转
				uni.navigateTo({
					url
				});
			},
			// 清除缓存的功能
			clear() {
				let value = uni.getStorageInfoSync().currentSize;
				if (value == 0) {
					uni.showToast({
						title: "没有缓存",
						icon: "none"
					});
					return;
				};
				// 将缓存大小转为MB
				value = value > 1024 ? `${(value/1024).toFixed(2)} MB` : `${value.toFixed(2)} KB`;
				uni.showModal({
					title: value,
					content: "是否要清除所有的缓存?",
					confirmText: "清除",
					cancelText: "不清除",
					success: res => {
						if (res.confirm) {
							// 使用同步的清除缓存功能;
							uni.clearStorageSync();
							uni.showToast({
								title: "清除成功",
								icon: "success"
							});
						};
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.setList {
		@include flexBetweenCenter;
		padding: 20rpx 30rpx;

		>text {
			&:last-of-type {
				color: #ADAEA9;
			}
		}
	}

	.outLogin {
		letter-spacing: 6rpx;
		@include flexCenterCenter;
		border-radius: 50rpx;
		margin: 150rpx 20rpx 0rpx;
		padding: 20rpx 0rpx;
		font-size: 1.1rem;
		background-color: #FF4A6A;
		color: #FFFFFF;
	}

	.bgColoroutLogin {
		background-color: #F72E50 !important;
	}
</style>
